import React from 'react';
import { Link } from 'react-router-dom';
import GITHUB_LANGUAGES_COLOR from 'configs/githublangs.json';

import { StarIcon } from 'components/icons';
import Text, { TEXT_VIEW } from 'components/Text';
import { classnames } from 'utils';

import classes from './CardMini.module.scss';

type CardMiniProps = {
    id?: string;
    className?: string;
    name: string;
    owner: string;
    repoUrl: string;
    language?: string;
    stars: number;
    publicRepo: boolean;
};

const cnCardMini = classnames(classes, 'cardMini');

const CardMini: React.FC<CardMiniProps> = ({ id, className, name, owner, repoUrl, publicRepo, language, stars }) => {
    return (
        <div id={id} className={cnCardMini() + ` ${className}`}>
            <div className={cnCardMini('top')}>
                <Link to={`/${owner}/${name}`} className={cnCardMini('name')}>
                    {name}
                </Link>
                <Text view={TEXT_VIEW.p14} className={cnCardMini('private')}>
                    {publicRepo ? 'Public' : 'Private'}
                </Text>
            </div>
            <div className={cnCardMini('bottom')}>
                {language && (
                    <div className={cnCardMini('language')}>
                        <div
                            className={cnCardMini('language-color')}
                            style={{ backgroundColor: (GITHUB_LANGUAGES_COLOR as Record<string, string>)[language] }}
                        />
                        <Text color="secondary" className={cnCardMini('language-language')}>
                            {language}
                        </Text>
                    </div>
                )}
                <Link to={repoUrl + '/stargazers'} className={cnCardMini('stars')}>
                    <StarIcon width={16} height={16} color="secondary" />
                    <Text className={cnCardMini('stars-count')} color="secondary">
                        {stars}
                    </Text>
                </Link>
            </div>
        </div>
    );
};

export default CardMini;
